<template>
<div>
    <u-popup v-model="payModel" border-radius="24" mode="bottom" @close="closePayPopUp" class="shareWrap" safe-area-inset-bottom>
        <div class="pay-popup">
                <p class="title">{{AppName}}收银台</p>

            <div class="body u-p-t-20">
                <view class="u-m-40">
                  <span class="u-font-xs" :style="{color:'#fa3f3f'}">¥</span>
                  <span class="ausPrice">{{ totalPrice}}</span>
                </view>
                <view>
                  {{ totalPrice | currency}}
                </view>
                <div class="pay-item__wrap">
                    <!--  #ifndef MP-WEIXIN -->
                    <div class="pay-item flex-between" @click="changePayType(1)"  >
                        <div class="pay-item__left ">
                            <u-icon name="zhifubao" color="#02a9f1" size="48"></u-icon>
                            <span class="payTypeName">支付宝支付</span>
                        </div>
                        <u-icon name="checkmark-circle-fill" color="#fa3f3f" size="42"  v-if="payType == 1"></u-icon>
                      <span class="unselectCircle"  v-else></span>
                    </div>
                    <!--  #endif -->
                    <div class="pay-item flex-between" @click="changePayType(2)"  >
                        <div class="pay-item__left">
                            <u-icon name="weixin-fill" color="#09bb07" size="48"></u-icon>
                            <span class="payTypeName ">微信支付</span>
                        </div>

                      <u-icon name="checkmark-circle-fill" color="#fa3f3f" size="42"  v-if="payType == 2"></u-icon>
                      <span class="unselectCircle"  v-else></span>
                    </div>
<!--                    <div class="pay-item flex-between" @click="changePayType(3)" v-if="scene!=='payChargeVip' " >
                        <div class="pay-item__left">
                            <u-icon name="red-packet-fill" color="#a04ad7" size="48"></u-icon>
                            <span class="payTypeName">当前余额 : {{remainingSum}}</span>
                            <span class="u-text-left  u-m-l-20 u-font-xs " :style="{color:$u.color['error']}" v-if="(totalPrice-remainingSum)>0">当前余额不足 </span>
                        </div>

                      <u-icon name="checkmark-circle-fill" color="#fa3f3f" size="42"  v-if="payType ==3"></u-icon>
                      <span class="unselectCircle"  v-else></span>
                    </div> -->
  
                   
                </div>
              <p class="u-font-sm u-m-t-20" v-if="false">
                <u-icon name="info-circle" color="#999" size="28"> </u-icon>
                通过第三方支付需支付0.6%的手续费
              </p>
                <!-- 确认支付button slot-->
                <slot></slot>
              
            </div>
        </div>
    </u-popup>
  
    <u-popup v-model="bankModel" border-radius="12" mode="bottom" >
      <div class="bankModelClass">
        <h3 class="u-text-center">请填写并提交您的支付信息</h3>
        <u-field class="u-m-t-20"
            v-model="cardName" v-if="false"
            label="银行"
                 :clearable="false"
            placeholder="请填写您的所属银行"
        >
        </u-field>
        <u-field
            v-model="cardNumber"
            label="银行卡号"
            placeholder="请填写您的银行卡号"
        >
        </u-field>
        <u-field
            v-model="realName"
            label="姓名"
            placeholder="请填写持卡人姓名"
        >
        </u-field>
        <u-field
            v-model="orderNumber"
            label="订单号" disabled
            :placeholder="orderNumber"
            placeholder-style="color:#333"
        >
        </u-field>
        <u-button class="u-m-t-20" type="warning" @click="bankPay">提交</u-button>
      </div>
    
    </u-popup>
    <u-toast ref="uToast" />
</div>
</template>

<script>
const time = 500
import APPNAME from './../config/index'

export default {
    data() {
        return {
            payType: 5,   //1 支付宝    2 微信
            payModel: false,
            clickPay: false,
            checked: false,
			bankModel:false,
            payinfos:{},
            AppName:'',
            orderNumber:'',
           cardName:'',
           cardNumber:'',
          realName:''
        }
    },
    props: {

        totalPrice: {
            default: '0.00'
        },
        //   订单号
        orderNum: {
            default: 0
        },
        //   人民币数额
        totalPriceRmb: {
            default: 0
        },

        payMoneyNum: {
            default: 0
        },
        //   余额
        remainingSum: {
            type: String,
            default: '0'
        },
        //场景        会员充值 ：'vipreCharge'      订单支付：'orderPay'
        scene: {
            default: 'orderPay'
        },
        //   选择的会员卡类型
        vipType: {
            type: String,
            default: 'year'
        },
      //是否 在操作完成后 跳转到其他页面
        isJump: {
            type: Boolean,
            default: true
        },
		isLinkTo: {
            type: Boolean,
            default: true
        },
      // 操作完成后跳转到其他页面路径
      callbackUrl:{
        type: String,
        default: ''
      }
    },
    mounted() {
      this.AppName = APPNAME
    },
    methods: {

        initDetail() {
            var data = {
                order_num: this.orderNum
            }
            this.$http.orderDetail(data).then((res) => {
                this.payMoneyNum = res.data.orderinfo.order_num
            })
        },
        // 切换支付方式
        changePayType(serial) {
            this.payType = serial;
            this.$emit('update:payType', this.payType)
        },
        //   关闭收银台弹层时触发事件
        closePayPopUp() {
            // if (this.isLinkTo) {
            //   this.$u.route({url:this.callbackUrl})
            // }

        },
          uToast(mess='',type='',url=''){
            this.$refs.uToast.show({
              title: mess,
              type: type,
              url: url,
            })
          },
      
        crosspay() {
			console.log(this.payinfos,"支付小心")
                    // #ifdef H5
                   this.payModel = false
                    return this.$toast('H5端暂不支持第三方支付')
                  // #endif
                  
                    const list = ['alipay','wxpay']
                    uni.requestPayment({
                        provider: list[this.payType-1],
                      // #ifdef APP-PLUS
                        orderInfo: this.payinfos,
                      // #endif
                      // #ifdef MP-WEIXIN
                        ...this.payinfos,
                      // #endif
                        success: res => {
                              this.uToast('支付成功','success')
                               this.payModel = false
                        },
                        fail: err => {
                          console.log("-> err", err);
                          this.uToast('支付失败','error','')
                          this.payModel = false
                        },
                        complete:()=>{
                            if(this.callbackUrl){
                             this.$u.route({url:this.callbackUrl,type:'redirect'})
                            }
                        }
                    });


        },
        bankPay(){
          
            if(!this.orderNumber){
              return  this.$refs.uToast.show({
                title:'请填写您的银行卡号',
                type:'error',
              })
            }
          if(!this.realName){
            return  this.$refs.uToast.show({
              title:'请填写持卡人姓名',
              type:'error',
            })
          }
          const data = {
            zf_type:''+this.payType,
            order_number:this.orderNumber,
            card_name:this.realName,
            card_number:this.cardNumber
          }
            this.$http.getzhifu(data).then(res2=>{
					console.log(res2.mess,"支付信息")
              if(res2.status===200){
            
                this.bankModel=false
                this.$refs.uToast.show({
                  title:res2.mess,
                  url: this.callbackUrl,
                  type:'success',
                })
              }else{
                this.bankModel=false
                this.$refs.uToast.show({
                  title:'订单失败',
                  type:'error',
                  back:true
                })
              
              }
            })
           
        }

    }

}
</script>

<style lang="scss" scoped>
.pay-popup{
  text-align: center;
  padding: 30upx 40upx;
}
.unselectCircle{
  width:28upx;
  height:28upx;
  margin: 4upx;
  border-radius:200px;
  border:2upx solid #d0d0d0;
  display: inline-block;
}
.shareWrap {
    .wrap {
        overflow-x: scroll;

        image {
            width: 100upx;
            height: 100upx;
        }

        .item {
            width: 160upx;
            float: left;
            flex-direction: column;
            text-align: center;

            .linkBtn {
                background: #e4e7e8;
                width: 80upx;
                height: 80upx;
                border-radius: 100%;

            }
        }
    }
}

.pay-popup {
    background: #fff;

    .iconWallet {
        background: #ff9900;
        width: 46upx;
        height: 46upx;
        border-radius: 10upx;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        margin-right: 12upx;

    }

    .pay-btn {

        margin-top: 80upx;
        text-align: center;
        color: #fff;
         padding: 25upx ;
        border-radius: 200px;
        background-image:linear-gradient(to left, #ffa468, #fa3f3f);
    }

    .pay-item__wrap {
        .pay-item {
            box-sizing: border-box;
            height: auto;
            display: flex;
            align-items: center;
            border-bottom: 4upx dashed #f5f5f5;
            height: 100upx;

        }
    }

    .body {

        .ausPrice {
            margin:0 10upx;
            color: #fa3f3f;
            font-size: 62upx;
           font-weight: bold;
        }

        p {
            color: #999;
        }
    }

    .pay-item {
        &>image {
            width: 37upx;
            height: 37upx;
        }
    }

    .pay-item__left {
        display: flex;
        align-items: center;

        .payTypeName {
            font-size: 28upx;
            margin-left: 8upx;
        }

        image {
            width: 49upx;
            height: 49upx;
        }
    }
}

.money {
    font-size: 80rpx;
    color: $u-type-warning;
    position: relative;

    .close {
        position: absolute;
        top: 20rpx;
        right: 20rpx;
        line-height: 28rpx;
        font-size: 28rpx;
    }
}

.tips {
    color: $u-tips-color;
}
.u-m-40{
  margin: 40upx;
}
.u-m-t-20{
  margin-top: 20upx;
}
.bankModelClass{
  padding: 50upx 30upx;
}
.u-field{
  border-bottom: 1upx solid #e4e4e4;
}
/deep/ .fild-body>*{
  flex:1
}
/deep/ .u-button-wrap{
  display: none;
}
</style>
